<div class="pure-view-container">
  <div class="x-view-title">${t('ui.security.role.title.roleManagement')}</div>
  <link href="${appCss('static/app/security/role-management.css')}" rel="stylesheet" />
  <div class="x-search-bar">
    <form>
      <div class="form-row align-items-center">
        <div class="col-auto"><label class="sr-only" for="roleCode"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.security.role.field.roleCode')}</div>
            </div><input type="text" class="form-control" id="roleCode" data-x-name="searchField.roleCode"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto"><label class="sr-only" for="roleName"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.security.role.field.roleName')}</div>
            </div><input type="text" class="form-control" id="roleName" data-x-name="searchField.roleName"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto"><label class="sr-only" for="remark"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.security.resource.field.remark')}</div>
            </div><input type="text" class="form-control" id="remark" data-x-name="searchField.remark"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto"><button type="button" class="btn btn-primary mb-2"
            data-x-ui="searchBtn">${t('ui.system.common.btn.search')}</button></div>
      </div>
    </form>
  </div>
  <div class="x-tool-bar"><button type="button" class="btn btn-outline-primary mb-2 btn-sm"
      data-x-ui="createBtn">${t('ui.system.common.btn.create')}</button></div>
  <table data-x-ui="roleTable" class="x-table-custom">
    <thead>
      <tr>
        <th data-field="id" data-visible="false">ID</th>
        <th data-field="roleCode">${t('ui.security.role.field.roleCode')}</th>
        <th data-field="roleName">${t('ui.security.role.field.roleName')}</th>
        <th data-field="effectiveFlagDesc">${t('ui.system.common.field.effectiveFlag')}</th>
        <th data-field="remark">${t('ui.system.common.field.remark')}</th>
        <th>${t('ui.system.common.field.operate')}</th>
      </tr>
    </thead>
  </table>
  <div data-x-ui="newRoleDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.security.role.dialog.newRole')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group x-form-required"><label
                for="roleCode">${t('ui.security.role.field.roleCode')}</label><input type="text"
                class="form-control" id="roleCode" name="roleCode" data-x-name="new.roleCode"
                placeholder="${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="roleName">${t('ui.security.role.field.roleName')}</label><input type="text"
                class="form-control" id="roleName" name="roleName" data-x-name="new.roleName"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 20)}" /></div>
            <div class="form-group x-form-required"><label
                for="effectiveFlag">${t('ui.system.common.field.effectiveFlag')}</label><select
                class="form-control" id="effectiveFlag" name="effectiveFlag" data-x-name="new.effectiveFlag">
                <option value="true" selected="">${t('ui.system.common.option.effectiveFlag.true')}</option>
                <option value="false">${t('ui.system.common.option.effectiveFlag.false')}</option>
              </select></div>
            <div class="form-group"><label for="remark">${t('ui.system.common.field.remark')}</label><input
                type="text" class="form-control" id="remark" name="remark" data-x-name="new.remark"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}" /></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div data-x-ui="editRoleDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.security.role.dialog.editRole')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form><input type="hidden" id="id" name="id" data-x-name="edit.id" /><input type="hidden" id="versionNumber"
              name="versionNumber" data-x-name="edit.versionNumber" />
            <div class="form-group x-form-required"><label
                for="roleCode">${t('ui.security.role.field.roleCode')}</label><input type="text"
                class="form-control" id="roleCode" name="roleCode" data-x-name="edit.roleCode"
                placeholder="${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="roleName">${t('ui.security.role.field.roleName')}</label><input type="text"
                class="form-control" id="roleName" name="roleName" data-x-name="edit.roleName"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 20)}" /></div>
            <div class="form-group x-form-required"><label
                for="effectiveFlag">${t('ui.system.common.field.effectiveFlag')}</label><select
                class="form-control" id="effectiveFlag" name="effectiveFlag" data-x-name="edit.effectiveFlag">
                <option value="true" selected="">${t('ui.system.common.option.effectiveFlag.true')}</option>
                <option value="false">${t('ui.system.common.option.effectiveFlag.false')}</option>
              </select></div>
            <div class="form-group"><label for="remark">${t('ui.system.common.field.remark')}</label><input
                type="text" class="form-control" id="remark" name="remark" data-x-name="edit.remark"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}" /></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div data-x-ui="authorizeDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.security.role.dialog.authorize')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <div data-x-ui="menuTree" class="menu-tree"></div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <script src="${appJs('app/menu/common/convert-to-tree-data.js')}" type="text/javascript"></script>
  <script src="${appJs('app/security/role/authorize-dialog.js')}" type="text/javascript"></script>
  <script src="${appJs('app/security/role/role-management.js')}" type="text/javascript"></script>
</div>